{% extends "vueAdmin/base_site.html" %}
{% load i18n static %}

{% block x-template %}
  {% include 'vueAdmin/components/statistic/index.html' %}
  {% include 'vueAdmin/components/timeline/index.html' %}
  {% include 'vueAdmin/components/chart/line.html' %}
  {% include 'vueAdmin/components/chart/pie.html' %}
{% endblock %}

{# site application section #}
{% block app %}
  <div style="height: 100vh">
    <div :style="contentStyle">
      <component-data-statistic></component-data-statistic>
    </div>
    <div :style="contentStyle">
      <demo-workplace-line-chart source="{% url 'student-enroll-trending' %}"></demo-workplace-line-chart>
    </div>
    <a-row :gutter="8">
      <a-col :span="16">
        <div :style="contentStyle">
          <demo-workplace-timeline></demo-workplace-timeline>
        </div>
      </a-col>
{#      <a-col :span="8">#}
{#        <div :style="contentStyle">#}
{#          <demo-workplace-pie-chart source="{% url 'student-enroll-ratio' %}"></demo-workplace-pie-chart>#}
{#        </div>#}
{#      </a-col>#}
    </a-row>
  </div>
{% endblock %}
{# site application section #}

{# application javascript section #}
{% block scripts %}
<script type="application/javascript">
window.mixins.mixins = {
  data() {
    return {
      contentStyle: {
        margin: '0 0 8px 0',
        padding: '0',
        border: '1px dashed #e8e8e8',
        borderRadius: '5px',
      }
    }
  }
}
</script>
{% endblock %}
{# application javascript section #}
